Tạo popup thông báo bên góc màn hình đẹp đơn giản cho Blogspot
Chào các bạn, nếu bạn đang có một vấn đề gì đó để thông báo với các độc giả trên blog của mình, mà không biết sử dụng code popup nào để tạo thông báo.
XEM DEMO
Bài viết này mình sẽ hướng dẫn các bạn tạo một popup thông báo nhỏ, gọn bên góc màn hình kèm theo nút tắt để người khác có thể tắt nó sau khi đọc xong.
CÁC BƯỚC THỰC HIỆN
Bước 1. Chèn script vào trước thẻ </head>
<script type=’text/javascript’>
function closeelement(){
div = document.getElementById("closeelement");div.style.display="none";}
setTimeout(closeelement, 9999999);
</script>
Bước 2. Chèn CSS và HTML vào sau thẻ <body>
<style>
#closeelement{position:fixed;z-index:9999999;bottom:30px;left:30px;padding:15px;background:#fff;border:4px solid #7577a9;width:500px;max-width:100%;font:400 20px Roboto;text-align:center;box-shadow:0 0 15px rgba(0,0,0,.1);transition:.5s}
#closeelement a{background:#7577a9;color:#fff;padding:5px 10px;position:absolute;right:-35px;top:-4px}</style>
<div id=’closeelement’><a href=’javascript:closeelement();’><i class=’fa fa-times’/></a>Đây là demo, bấm vào button bên phải để tắt!<br/><b>bacsiwindows.com</b></div>
Bước 3. Lưu.
TỔNG KẾT
Chỉ với một ít HTML và Javascript, bạn đã có một popup thông báo khá gọn nhẹ và đẹp gắn bên dưới góc màn hình cho Blogspot rồi nhé! 🙂